<template>
  <div class="mnge">
<ClassSearch @parentSeach="parentSeachFun"  />
<ClassList :myarr="arr" @resetList="initClass" @opendalogfn="openFn"/>
<TiaoZhuan @changePage="parentPage"/>
<!--弹框组件 -->
<Dialog :row="row" v-if="show" @closedialog="show = false"  @resettable="resettable"  />
  </div>
</template>

<script>
import ClassList from '../ClassManage/components/ClassList.vue'
import ClassSearch from '../ClassManage/components/ClassSearch.vue'
import TiaoZhuan from '../ClassManage/components/TiaoZhuan.vue'
import  {getClassApi} from '../../api/classApi'
import Dialog from '../ClassManage/components/Dialog.vue'


export default {
components:{
  ClassList,
  ClassSearch,
  TiaoZhuan,
  Dialog,
},
mounted(){
this.initClass()

},
data(){
return{
  arr:[],
  keyword:'',
  page:1,    //默认当前显示第一页
  pagesize:8,  //每一页显示8条数据
  totol:0,
  show:false,
  row:{},
}
},

methods:{
  // 打开弹窗函数
openFn(data){
  console.log(data);
  this.row = data
this.show = true
// 执行编辑逻辑


},
    resettable(){
      // 刷新表格 关闭弹框
      this.initClass()
      this.show = false
    },


// 切换页面事件
parentPage(val){
this.page = val
this.initClass()
},

  initClass(){
    // 首屏查询和搜索公用一个接口,第一次为空的时候,返回全部数据,
    //首屏查询和分页器也是一个接口===>需要加page当前页和pagesize每一页多少条
    var params = 
    {keyword:this.keyword,
     page:this.page,
     pagesize:this.pagesize,             
    
    }
getClassApi(params).then(res=>{
   console.log(res)
  if(res.code == 200){
    this.arr = res.data
    // console.log(this.arr)
    // this.arr=this.arr.forEach(item=>{
    //   // var temp=''+item.Image;
    //   // console.log(temp)
    //   item.Image=require(`${item.Image}`);
    //   console.log(item.Image)
    // })
    // console.log(this.arr)

  }
})
      
  },

  parentSeachFun(val){
  this.keyword = val
  this.initClass()

  }
}


}
</script>

<style lang="less" scoped>
.mnge{
  background-color: #D4E0F6;
  width: 100%;
  height: 100%;
}
</style>